<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3基础</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/html.css">
</head>
<body>
<div class="container">
    <div class="catalogue">
        <div><a href="#css3_select">CSS3选择器</a></div>
        <div><a href="#css3_radius">CSS边框与圆角</a></div>
        <div><a href="#css3_background">CSS3背景与渐变</a></div>
        <div><a href="#css3_text_font">CSS3文本与字体</a></div>
        <div><a href="#css3_transform">CSS3转换</a></div>
        <div><a href="#css3_transition">CSS3过渡</a></div>
        <div><a href="#css3_animation">CSS3动画</a></div>
    </div>
    <div class="substance">
        <div class="one">
            <h1 id="css3_select">CSS3选择器 | <a target="_blank" href="../demo/8-css3demo.html">CSS3-demo</a></h1>
            <pre>
CSS3新特性:
    1-新的选择器,如 div:last-child  //div节点下面的最后一个直接子节点
    2-多列布局,如 -webkit-column-count:3
    3-圆角:   border-radius
    4-渐变背景图:  background-image: -webkit-gradient(linear,0%,0%,100%     0%,from(#2a8bbe),to(#fe280e))
    5-transform: 调整元素的位置(x,y轴变动)
    6-transitions: 可以实现过渡的动画效果
    7-animation: 定义复杂的动画
    实现动画的2种方式:
            1) transition: all 1s;
            2) -webkit-animation: 动画名 2s infinite ease-in-out .5s;


            </pre>
            <h2>CSS3选择器</h2>
            <pre>
选择器优选级:  行内样式 > ID选择器 > 类、属性选择器和伪类选择器 > 元素和伪元素 > *(通配符选择器)

伪类选择器-UI 元素状态伪类:
    (1):enabled 	input:enabled 	选择每个启用的input元素
    (2):disabled 	input:disabled 	选择每个禁用的input元素
    (3):checked 	input:checked 	选择每个被选中的input元素

结构类选择器:
    (1):first-child 	p:first-child 	选择属于其父元素的第一个子元素刚好是p元素的每个p元素
    (2):first-of-type 	p:first-of-type 选择属于其父元素的首个p元素的每个p元素
    (3):last-of-type 	p:last-of-type 	选择属于其父元素的最后p元素的每个p元素
    (4):only-of-type 	p:only-of-type 	选择属于其父元素的子元素中只有一个p元素的每个p元素
    (5):only-child 	    p:only-child 	选择属于其父元素的唯一子元素是p元素的每个p元素
    (6):nth-child(n) 	p:nth-child(2) 	选择属于其父元素的第n(n从1开始)个子元素刚好是p元素的所有p元素; odd(奇数) even(偶数)
    (7):nth-last-child(n) 	p:nth-last-child(2) 	同上，从最后一个子元素开始计数
    (8):nth-of-type(n) 	p:nth-of-type(2) 	选择属于其父元素第二个p元素的每个p元素
    (9):nth-last-of-type(n) 	p:nth-last-of-type(2) 	同上，但是从最后一个子元素开始计数
    (10):last-child 	p:last-child 	选择属于其父元素最后一个子元素每个p元素
    (11):root 	:root 	选择文档的根元素
    (12):empty 	p:empty 	选择没有子元素的每个p元素（包括文本节点）

否定选择器:
    :not(selector) 	:not(p) 	选择非p元素的每个元素

伪元素(用于向某些选择器设置特殊效果):
    (1):before 	p:before 	在每个p元素的内容之前插入内容;配合content使用
    (2):after 	p:after 	在每个p元素的内容之后插入内容;配合content使用
    (3):first-letter 	p:first-letter 	选择每个p元素的首字母
    (4):first-line 	p:first-line 	选择每个p元素的首行
    (5)::selection 	::selection 	选择被用户选取的元素部分(仅限于块元素);用于设置在浏览器中选中文本后的背景色与前景色

CSS权重:
    1)什么是权重:当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程
    2)权重等级与权值:行内样式(1000)>ID选择器(100)>类、属性选择器和伪类选择器(10)>元素和伪元素(1)>*(0)
    3)权重计算口诀:从0开始，一个行内样式+1000，一个id+100，一个属性选择器、class或者伪类+10，一个元素名或者伪元素+1
CSS权重规则:
    1)包含更高权重选择器的一条规则拥有更高的权重
    2)ID选择器(#idValue)的权重比属性选择器([id="idValue"])高
    3)带有上下文关系的选择器比单纯的元素选择器权重要高
    4)与元素“挨得近”的规则生效
    5)最后定义的这条规则会覆盖上面与之冲突的规则
    6)无论多少个元素组成的选择器，都没有一个class选择器权重高
    7)通配符选择器权重是0，被继承的css属性也带有权重，权重也是0
            </pre>
        </div>
        <div class="one">
            <h1 id="css3_radius">CSS边框与圆角</h1>
            <h2>CSS3圆角</h2>
            <pre>border-radius 属性:一个最多可指定四个border -*- radius属性的复合属性，这个属性允许你为元素添加圆角边框！
语法: border-radius: 1-4 length|% / 1-4 length|%
CSS3 指定每个圆角:
    多值
        四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
        三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
        两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
        一个值： 四个圆角值相同
    属性
        border-top-left-radius 定义了左上角的弧度
        border-top-right-radius 定义了右上角的弧度
        border-bottom-right-radius 定义了右下角的弧度
        border-bottom-left-radius 定义了左下角的弧度
                    </pre>
            <h2>CSS3盒阴影</h2>
            <pre>box-shadow 属性:box-shadow属性可以设置一个或多个下拉阴影的框
语法: box-shadow: h-shadow v-shadow blur spread color inset
            </pre>
            <h2>CSS3边界图片</h2>
            <pre>border-image 属性:使用border-image-*属性来构建美丽的可扩展按钮
语法:border-image: source slice width outset repeat
CSS3 边界图片详解:
    1)border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式
        语法:border-image-source: none|image;
    2)border-image -slice属性指定图像的边界向内偏移;指边框图像顶部、左侧、顶部、右侧的内偏移量
        语法:border-image-slice: number|%|fill;
        属性值:
            1)number:数字值，代表图像中像素（如果是光栅图像）或矢量坐标（如果是矢量图像）。
            2)%:百分比图像的大小是相对的，水平偏移图像的宽度，垂直偏移图像的高度。
            3)fill:为可选属性值，假如指定，那么中间第九块不是透明块，假如不指定，那么为透明图片处理
                作用：如下图,把边框图像切成9个区域，分别是4个角、4边区域和一个中间部位,可称作9宫格，
                    假如说不应用 fill 这个可选属性值的话，那么中间第九块格子被当做透明不见
            <img src="../image/css3.png" width="40%"/>
    3)border-image-width 属性:border-image -width属性指定图像边界的宽度
        语法:border-image-width: number|%|auto;
        属性值:
            （1）number：代表对应的 border-width 的倍数。
            （2）%：边界图像区域的大小：横向偏移宽度的面积，垂直偏移高度的面积。
            （3）auto：如果规定该属性，则宽度为对应的图像切片的固有宽度。
            作用：代替盒子本身的边框宽度 border-width。
    4)border-image-outset 属性:指定在边框外部绘制border-image-area的量;指边框图像区域超出边框的量
        语法:border-image-outset: length|number;
        属性值:(1)length：具体的像素单位。 (2)number:具体的数字:代表对应的 border-width 的倍数。
        作用:让边框背景延伸到盒子外。
    5)border-image-repeat属性:用于图像边界是否应重复(repeated)、拉伸(stretched)或铺满(rounded);可以规定两个值;如果省略第二个值,则采取与第一个值相同的值
        语法:border-image-repeat: stretch|repeat|round|initial|inherit;
        属性值：
            （1）repeat：平铺（重复）图像来填充区域。
            （2）round： 如果无法完整平铺所有图像，则对图像进行缩放以适应区域。
            （3）stretch：拉伸图像来填充区域。
            作用：图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
                    </pre>
            <h2>web前端常用长度单位</h2>
            <pre>
1、px 像素（Pixel）:相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的
2、em 是相对长度单位:相对于当前对象内文本的字体尺寸.
   如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数。
3、rem:是 CSS3 新增的一个相对单位,相对的只是HTML根元素,可以只修改根元素就可以成比例地调整所有字体大小,
   又可以避免字体大小逐层复合的连锁反应。兼容性 IE9+都可以兼容。
4、pt (point，磅):是一个物理长度单位,指的是 72 分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
5、vh and vw: 用视口(viewpoint)的宽度或者高度。1vh 等于 1/100 的视口高度。
   栗子:浏览器高度900px,1vh=900px/100 = 9 px.同理,如果视口宽度是750;1vw = 750px/100 = 7.5px
                    </pre>
        </div>
        <div class="one">
            <h1 id="css3_background">CSS3背景与渐变</h1>
            <h2>CSS3背景</h2>
            <pre>CSS3 背景图像区域
    background-clip:指定背景绘制区域;
        共有3种情况:1)border-box背景被裁剪到边框盒; 2)padding-box背景被裁剪到内边距框; 3)content-box背景被裁剪到内容框
CSS3 背景图像定位
    background-origin :设置元素背景图片的原始起始位置
        background-origin: padding-box|border-box|content-box;
    background-position :定义背景图片位置，两个值：水平和垂直偏移量
CSS3 背景图像大小
    background-size ：指定背景图片大小。值可以为数值、百分比、cover 和 contain。
        background-size: length|percentage|cover|contain;
CSS3 多重背景图像
    CSS3 允许为元素使用多个背景图像.例如: background-image: url(img1.jpg),url(img2.png);
CSS3 背景属性整合
    背景缩写属性可以在一个声明中设置所有的背景属性。
    模式：background: color position size repeat origin clip attachment image;
                    </pre>
            <h2>CSS3渐变/线性渐变/径向渐变</h2>
            <pre><span style="color: blue;font-size: larger">渐变(gradients)</span>可以在两个或多个指定的颜色之间显示平稳的过渡;
<span style="color: blue;font-size: larger">线性渐变(Linear Gradients):</span>是沿着一根轴线改变颜色,从起点到终点颜色进行顺序渐变(从一边拉向另一边)
background: linear-gradient(direction, color-stop1, color-stop2, ...);（默认从上到下）
1)线性渐变 - 从左到右
    background: -webkit-linear-gradient( begin-direction, color-stop1, color-stop2, ...);
    background: -moz-linear-gradient( end-direction, color-stop1, color-stop2, ...);
    background: -o-linear-gradient( end-direction, color-stop1, color-stop2, ...);
    background: linear-gradient(to end-direction, color-stop1, color-stop2, ...)
2)线性渐变 – 对角
    background: -webkit-linear-gradient( begin-level begin-vertical,color-stop1, color-stop2, ...);
    background: -moz-linear-gradient( end-level end-vertical,color-stop1, color-stop2, ...);
    background: -o-linear-gradient( end-level end-vertical,color-stop1, color-stop2, ...);
    background: linear-gradient( to end-level end-vertical,color-stop1, color-stop2, ...);
3)线性渐变 – 使用角度: background: linear-gradient(angle, color-stop1, color-stop2, ...);
    角度说明:角度是指水平线和渐变线之间的角度，逆时针方向计算。
            0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变
4)线性渐变 – 颜色结点:
    语法:background: linear-gradient( color1 length|percentage,color2 length|percentage,...);
5)线性渐变 – 重复渐变:
    语法:background: repeating-linear-gradient(color1 length|percentage,color2 length|percentage,...);

<span style="color: blue;font-size: larger">径向渐变(Radial Gradients):</span>从起点到终点颜色从内到外进行圆形渐变(从中间向外拉)
background: radial-gradient(center, shape size, start-color, ..., last-color);(默认颜色结点均匀分布)
1)径向渐变 - 颜色结点均匀分布（默认）
    background: radial-gradient(color-stop1, color-stop2, ...);
2)径向渐变 - 颜色结点不均匀分布
    background: radial-gradient(color1 length|percentage,color2 length|percentage, ...);
3)径向渐变 – 设置形状
    语法:background: radial-gradient(shape, color-stop1, color-stop2, ...);
    形状说明:circle —— 圆形      ellipse —— 椭圆（默认）
4)径向渐变 – 尺寸大小关键字
    语法:background: radial-gradient(size, color-stop1, color-stop2, ...);
    关键字说明
        closest-side：最近边 farthest-side：最远边
        closest-corner：最近角 farthest-corner：最远角
5)重复渐变
    background: repeating-radial-gradien ( color1 length|percentage,color2 length|percentage,...);
                    </pre>
        </div>
        <div class="one">
            <h1 id="css3_text_font">CSS3文本与字体</h1>
            <h2>CSS3文本</h2>
            <pre>
文本阴影（text-shadow）
    该属性用于给文字设置阴影效果，一共有 4 个值。第一个值为水平偏移量，第二个值为竖直偏移量，第三个值为模糊距离，第四个值为颜色。
    例: text-shadow:10px 10px 10px red;
换行
    word-break 属性规定自动换行的处理方法。共有3个值：normal break-all keep-all
    word-wrap 属性允许长单词或 URL 地址换行到下一行;语法 word-wrap: normal|break-word;
新文本属性
    1)text-align-last 属性规定如何对齐文本的最后一行
        text-align-last: auto|left|right|center|justify|start|end|initial|inherit;
        兼容性:text-align-last 属性只有IE支持，在Firefox中需要加上其前缀“-moz”, Chrom50.0.2661.102以上
        注意:text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用
    2)text-emphasis 属性:向元素的文本应用重点标记以及重点标记的前景色
        语法:text-emphasis: text-emphasis-style text-emphasis-color;
    3)text-justify 属性规定当 text-align 被设置为 justify 时的齐行方法
        语法:text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;
    4)text-overflow 属性规定当文本溢出包含元素时该如何处理。
        语法:text-overflow: clip|ellipsis|string;
                    </pre>
            <h2>CSS3字体
            | <a href="https://www.fontsquirrel.com/tools/webfont-generator" target="_blank">CSS3 获取特殊字体(FontSquirrel)</a>
            </h2>
            <pre>
@font-face 是 css3 里面的一个字体模块,可以通过它引入一些特殊的的字体文件;
    (字体文件要放在服务器上，当页面加载的时候,文字文件也会被加载)使网上开发不再拘束于系统的默认安装字体。
使用语法:
    @font-face {
        font-family: &lt;YourWebFontName&gt;;
        src: &lt;source&gt; [&lt;format&gt;][,&lt;source&gt; [&lt;format&gt;]]*;
        [font-weight: &lt;weight&gt;];
        [font-style: &lt;style&gt;];
    }
    YourWebFontName:自定义的字体名称，他将被引用到Web元素中的font-family
    source:自定义的字体的存放路径，可以是相对路径也可以是绝路径
    format:自定义字体的格式，主要用来帮助浏览器识别
    weight和style:weight定义字体是否为粗体，style主要定义字体样式，如斜体

    TrueTpe(.ttf)格式: .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化
    OpenType(.otf)格式: .otf字体被认为是一种原始的字体格式，其内置在TrueType的基础上，所以也提供了更多的功能
    Web Open Font Format(.woff)格式:
        .woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离
    Embedded Open Type(.eot)格式:  .eot字体是IE专用字体，可以从TrueType创建此格式字体
    SVG(.svg)格式:  .svg字体是基于SVG字体渲染的一种格式

<span style="font-size: larger;color: #e9394a">推荐通用模版</span>
@font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
    url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
    url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}

@font-face字体应用:  Element {  font-family: 'YourWebFontName'; }

                    </pre>
        </div>
        <div class="one">
            <h1 id="css3_transform">CSS3转换</h1>
            <pre>
CSS3的变形(Transform)属性:让元素在一个坐标系统中变形.这个属性包含一系列变形函数,可以移动、旋转和缩放元素;
语法 transform: none(默认值) | &lt;transform-function&gt; [ &lt;transform-function&gt; ]*;

transform-origin属性允许您更改转换元素的位置;  语法: transform-origin: x-axis y-axis z-axis;

CSS3 扩展属性
    transform-style 属性指定嵌套元素是怎样在三维空间中呈现。 语法  transform-style: flat(默认值)|preserve-3d;
    perspective 属性,指定观察者与「z=0」平面的距离,使具有三维位置变换的元素产生透视效果。 语法perspective: number|none(默认值);
    perspective-origin 属性;指定透视点的位置。语法 perspective-origin: x-axis y-axis;  默认值:perspective-origin: 50% 50%;
    backface-visibility 属性;指定元素背面面向用户时是否可见。语法 backface-visibility: visible(默认值)|hidden;
            </pre>
            <h2>2D转换</h2>
            <pre>
transform: 向元素应用 2D 或 3D 转换;
2D Transform 方法:
    matrix(n,n,n,n,n,n)  定义 2D 转换，使用六个值的矩阵。

    <span style="color: #e9394a;font-size: larger">(1)移动 translate(x,y)  定义2D转换,沿着X和Y轴移动元素</span>
        translateX(x)仅水平方向移动(X轴移动);语法:  transform: translateX(&lt;translation-value&gt;);
        translateY(Y)仅垂直方向移动(Y轴移动);语法:  transform: translateY(&lt;translation-value&gt;);
        translate(x, y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);语法:  transform: translate(&lt;translation-value&gt;[, &lt;translation-value&gt;]);

    <span style="color: #e9394a;font-size: larger">(2)旋转 rotate(angle)</span>定义 2D 旋转,在参数中规定角度; 语法: transform: rotate(&lt;angle&gt;);参数说明: angle指旋转角度,正数表示顺时针旋转,负数表示逆时针旋转。

    <span style="color: #e9394a;font-size: larger">(3)缩放 scale</span>
        scaleX(x)元素仅水平方向缩放(X轴缩放);语法  transform: scaleX(x);
        scaleY(y)元素仅垂直方向缩放(Y轴缩放);语法   transform: scaleY(y);
        scale(x, y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放);语法 transform: scale(x,y);

    <span style="color: #e9394a;font-size: larger">(4)扭曲  skew()方法,指定对象skew transformation(斜切扭曲)</span>
        skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);语法  transform: skewX(x);
        skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形);语法   transform: skewY(y);
        skew(x, y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);语法   transform: skew(x,y);
                    </pre>
            <h2>3D转换</h2>
            <pre>
<span style="font-size: larger;color: #e9394a">(1)transform: 向元素应用 2D 或 3D 转换</span>
    transform-style: 规定被嵌套元素如何在 3D 空间中显示。

<span style="font-size: larger;color: #e9394a">(2)perspective: 规定 3D 元素的透视效果</span>
    perspective-origin: 规定 3D 元素的底部位置。
    backface-visibility: 定义元素在不面对屏幕时是否可见。

<span style="font-size: larger;color: #e9394a">(3)3D Transform 方法</span>
    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 定义 3D 转换，使用 16 个值的 4x4 矩阵。

    translate3d(x,y,z): 指定对象的3D位移;语法: transform:translate3d(x, y, z); 参数说明:第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
        translateX(x): 定义 3D 转化，仅使用用于 X 轴的值。
        translateY(y): 定义 3D 转化，仅使用用于 Y 轴的值。
        translateZ(z): 指定对象Z轴的平移;语法: transform:translateZ(z);参数说明:参数对应Z轴,不允许省略。

    scale3d(x,y,z): 指定对象的3D缩放; 语法: transform: scale3d(x, y, z);
        scaleX(x): 定义 3D 缩放转换，通过给定一个 X 轴的值。
        scaleY(y): 定义 3D 缩放转换，通过给定一个 Y 轴的值。
        scaleZ(z): 指定对象的z轴缩放;语法: transform: scaleZ(z);   参数说明:参数对应Z轴,不允许省略。

    rotate3d(x,y,z,angle): 定义 3D 旋转; 语法:transform:rotate3d(x, y, z, angle); 参数说明:前3个参数分别表示旋转的方向x,y,z;第4个参数表示旋转的角度,参数不允许省略
        rotateX(angle): 定义沿 X 轴的 3D 旋转; 语法:transform: rotateX(angle);   参数说明:angle表示旋转的角度
        rotateY(angle): 定义沿 Y 轴的 3D 旋转; 语法:transform: rotateY(angle);   参数说明:angle表示旋转的角度
        rotateZ(angle): 定义沿 Z 轴的 3D 旋转; 语法:transform: rotateZ(angle);   参数说明:angle表示旋转的角度
                    </pre>
            <h2>CSS3矩阵</h2>
            <pre>
矩阵的概念
矩阵可以理解为方阵，只不过，平时方阵里面站的是人，矩阵中是数值。而所谓矩阵的计算，就是两个方阵的人（可以想象成古代的方阵士兵）相互冲杀。

CSS3中的矩阵
    CSS3中的矩阵指的是一个方法，书写为matrix()和matrix3d()；
    matrix是元素2D平面的移动变换(transform)，2D变换矩阵为3*3；
    matrix3d是元素3D的移动变换(transform)，3D变换则是4*4的矩阵。

矩阵matrix
    transform: matrix(a, b, c, d, tx, ty); 注意书写方向是竖直方向。
    转换公式  x、y表示转换元素的所有坐标;  目标矩阵说明  ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置。
    矩阵matrix举个栗子
        transform: matrix(1, 0, 0, 1, 30, 30); /* a=1, b=0, c=0, d=1, e=30, f=30 */
        根据这个矩阵偏移元素的中心点,假设是(0,0),即x=0,y=0变换后,x=ax+cy+e=1*0+0*0+30=30,y=bx+dy+f=0*0+0*1+30=30
        于是,整个元素的中心点从(0, 0)变成了(30,30),整个元素就发生了平移
        说明 transform: matrix(1, 0, 0, 1, x, y)等同于transform: translate(x, y)。
        注意 matrix在FF浏览器下需要添加单位，webkit内核默认px，translate等方法需要加单位

矩阵matrix缩放(scale):  matrix(sx, 0, 0, sy, 0, 0) —— scale(sx, sy)
矩阵matrix旋转(rotate): matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0) —— rotate(θdeg)。
矩阵matrix拉伸(skew):   matrix(1, tanθy, tanθx, 1, 0, 0) —— skew(θxdeg, θydeg)。
矩阵matrix镜像对称效果: matrix((1-k*k) / (1+k*k), 2k / (1 + k*k), 2k / (1 + k*k), (k*k - 1) / (1+k*k), 0, 0)
    小小说明:对称轴一定通过元素变换的中心点，k是对称轴的斜率

3D变换中的矩阵
    从二维到三维,是从4到9;而在矩阵里头是从3*3变成4*4,9到16了
    小小例子: transform: matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1);
                    </pre>
        </div>
        <div class="one">
            <h1 id="css3_transition">CSS3过渡</h1>
            <pre class="bj">
过渡（Transition）
    − 允许css的属性值在一定的时间区间内平滑地过渡
    − 在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值

transition 简写属性，用于在一个属性中设置四个过渡属性;复合属性，检索或设置对象变换时的过渡。
语法: − transition: property duration timing-function delay;
    1)transition-property 规定应用过渡的 CSS 属性的名称。
        transition-property: none | all | property;
        参数说明:none(没有属性改变)  all(所有属性改变)，默认值   property(元素属性名)
    2)transition-duration 定义过渡效果花费的时间。默认是 0。
        transition-duration: time;
        参数说明  规定完成过渡效果需要花费的时间（以秒或毫秒计）  默认值是 0
    3)transition-timing-function 规定过渡效果的时间曲线;设置过渡的动画类型;默认是 "ease"。
        transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out |
            step-start | step-end | steps(&lt;integer&gt;[, [ start | end ] ]?) | cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;);
        参数说明
            − linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
            − ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
            − ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
            − ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
            − ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
            − step-start：等同于 steps(1, start)
            − step-end：等同于 steps(1, end)
            − steps(&lt;integer&gt;[, [ start | end ] ]?)：接受两个参数的步进函数
                    第一个参数：必须为正整数，指定函数的步数
                    第二个参数：取值可是start或end，指定每一步的值发生变化的时间点
                    第二个参数：可选，默认值为end
            − cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;): 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

    4)transition-delay 规定过渡效果何时开始;检索或设置对象延迟过渡的时间。默认是 0。
        transition-delay: time;  指定秒或毫秒数之前要等待切换效果开始

            </pre>
        </div>
        <div class="one">
            <h1 id="css3_animation">CSS3动画</h1>
            <pre>动画（animation）
anima——灵魂、animate——赋予生命
    动画可以定义为使用绘画的手法，创造生命运动的艺术。
    视觉暂留原理: 人类具有“视觉暂留”的特性，人的眼睛看到一幅画或一个物体后，在0.34秒内不会消失。
    动画原理: 通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，利用视觉暂留的原理，在一幅画还没有消失前播放下一幅画，就会给人造成一种流畅的视觉变化效果
兼容性: IE10+、FireFox16+、Chrome43+、Safari9+、Opera30+、Android（-webkit-）
CSS3 动画: 使元素从一种样式逐渐变化为另一种样式的效果
            </pre>
            <ul>
                <li style="border: 1px solid red">CSS3 animation 动画
                    <pre>
检索或设置对象所应用的动画特效;所有动画属性的简写属性,除了 animation-play-state 属性;
语法: animation: name duration timing-function delay iteration-count direction fill-mode play-state;
    (1)animation-name 检索或设置对象所应用的动画名称;为 @keyframes 动画规定名称;
        语法: animation-name: keyframename | none
        说明: keyframename 指定要绑定到选择器的关键帧的名称; none 规定无动画效果(可用于覆盖从级联的动画)
    (2)animation-duration 检索或设置对象动画的持续时间;规定动画完成一个周期所花费的秒或毫秒
        语法: animation-duration: time
        <span style="color: #e9394a;font-size: larger">说明: time 规定完成动画所花费的时间;默认值是 0,意味着没有动画效果</span>
    (3)animation-timing-function 检索或设置对象动画的过渡类型;规定动画的速度曲线;速度曲线定义动画从一套 CSS样式变为另一套所用的时间;速度曲线用于使变化更为平滑
        语法:  animation-timing-function:  ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end |
              steps(&lt;integer&gt;[, [ start | end ] ]?) | cubic-bezier(&lt;number&gt;, &lt;number&gt;,&lt;number&gt;, &lt;number&gt;);
        参数说明: (使用名为三次贝塞尔(Cubic Bezier)的数学函数,来生成速度曲线.您能够在该函数中使用自己的值,也可以预定义的值)
            linear:线性过渡;动画从头到尾的速度是相同的;等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
            ease(默认值): 平滑过渡;动画以低速开始,然后加快,在结束前变慢;等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
            ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
            ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
            ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
            step-start:等同于 steps(1, start)
            step-end:等同于 steps(1, end)
            steps(&lt;integer&gt;[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
            cubic-bezier(n,n,n,n):特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
    (4)animation-delay 检索或设置对象动画的延迟时间;规定动画何时开始;(以秒或毫秒计)
        语法: animation-delay: time;    说明: time 可选,定义动画开始前等待的时间,以秒或毫秒计,默认值是 0
    (5)animation-iteration-count 检索或设置对象动画的循环次数;规定动画被播放的次数;默认是 1
        语法：animation-iteration-count: n | infinite;
        说明: n 定义动画播放次数的数值;   infinite 规定动画应该无限次播放
    (6)animation-direction 定义是否应该轮流反向播放动画;检索或设置对象动画在循环中是否反向运动;规定动画是否在下一周期逆向地播放。默认是 "normal"
        语法:  animation-direction: normal(正常方向) | reverse(反方向运行) | alternate | alternate-reverse | initial | inherit;
        参数说明
            alternate: 动画先正常运行再反方向运行，并持续交替运行；
            alternate-reverse: 动画先反运行再正方向运行，并持续交替运行。
        <span style="background: #ADEAEA">注释:如果把动画设置为只播放一次,则该属性没有效果</span>
    (7)animation-play-state 规定动画正在运行还是暂停;默认是 "running"
        语法: animation-play-state: paused | running;
        说明: paused 规定动画已暂停,running 规定动画正在播放
        注释: 可以在 JavaScript 中使用该属性,这样就能在播放过程中暂停动画
    (8)animation-fill-mode 规定动画在播放之前或之后,其动画效果是否可见;规定对象动画时间之外的状态;规定当动画不播放时(当动画完成或当动画有延迟未开始播放时),要应用到元素的样式
        语法: animation-fill-mode: none | forwards | backwards | both | initial | inherit;
        参数说明:
            none:默认值。不设置对象动画之外的状态；
            forwards:设置对象状态为动画结束时的状态;当动画完成后,保持最后一个属性值（在最后一个关键帧中定义）
            backwards:设置对象状态为动画开始时的状态;在animation-delay所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)
            both:设置对象状态为动画结束或开始的状态;向前和向后填充模式都被应用
                    </pre>
                </li>
                <li style="border: 1px solid red">
                    <span style="color: red">@keyframes 关键帧;可以指定任何顺序排列来决定Animation动画变化的关键位置</span>
                    <pre>
使用说明: 使用@keyframes规则创建动画,通过逐步改变从一个CSS样式设定到另一个;在动画过程中可以通过@keyframes规则多次更改CSS样式的设定。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式,在动画过程中,能够多次改变这套 CSS 样式;
    以百分比来规定改变发生的时间,或者通过关键词 "from" 和"to",等价于0%和100%; 0%是动画的开始时间,100%是动画的结束时间
语法:
    @keyframes animationname {
        keyframes-selector {
            css-styles;
        }
    }
参数说明
    animationname: 必写项,定义animation的名称。
    keyframes-selector: 必写项,动画持续时间的百分比; 0-100%、from (0%)、to (100%)
    css-styles：必写项,一个或多个合法的CSS样式属性
作用: 通过 @keyframes 规则,创建动画
注释: 请使用动画属性来控制动画的外观,同时将动画与选择器绑定

demo:
    &lt;head&gt;
        &lt;style&gt;
            div {
                width: 100px; height: 100px;
                background: red; position: relative;
                animation: mymove 5s infinite;
                -moz-animation: mymove 5s infinite;		/* Firefox */
                -webkit-animation: mymove 5s infinite; 	/* Safari and Chrome */
                -o-animation: mymove 5s infinite; 	/* Opera */
            }
            @keyframes mymove {
                0% {top: 0px;} 25% {top: 200px;} 75% {top: 50px} 100% {top: 100px;}
            }
            /* Firefox */
            @-moz-keyframes mymove {
                0% {top: 0px;} 25% {top: 200px;} 75% {top: 50px} 100% {top: 100px;}
            }
            /* Safari and Chrome */
            @-webkit-keyframes mymove {
                0% {top: 0px;} 25% {top: 200px;} 75% {top: 50px;} 100% {top: 100px;}
            }
            /* Opera */
            @-o-keyframes mymove {
                0% {top: 0px;} 25% {top: 200px;} 75% {top: 50px;} 100% {top: 100px;}
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div&gt;&lt;/div&gt;
    &lt;/body&gt;
                    </pre>
                </li>
                <li style="border: 1px solid red">will-change
                    <pre>作用：提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置
语法: will-change: auto|scroll-position|contents|&lt;custom-ident&gt;|&lt;animateable-feature&gt;;
说明: auto 表示没有特别指定哪些属性会变化，浏览器需要自己去猜，然后使用浏览器经常使用的一些常规方法优化
    &lt;animateable-feature&gt;可以是以下值：
        scroll-position 表示开发者希望在不久后改变滚动条的位置或者使之产生动画
        contents 表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画
    &lt;custom-ident&gt;表示开发者希望在不久后改变指定的属性名或者使之产生动画。如果属性名是简写，则代表所有与之对应的简写或者全写的属性

目标: 增强页面渲染性能。
CPU和GPU
    CPU即中央处理器，解释计算机指令以及处理计算机软件中的数据。
    GPU即图形处理器，专门处理和绘制图形相关的硬件。GPU是专为执行复杂的数学和几何计算而设计的，有了它，CPU就从图形处理的任务中解放出来，可以执行其他更多的系统任务。
硬件加速: 在计算机中把计算量非常大的工作分配给专门的硬件来处理，减轻CPU的工作量
现状:
    CSS的动画、变形、渐变并不会自动的触发GPU加速，而是使用浏览器稍慢的软件渲染引擎。
    在transition，transform和animation的世界里，应该卸载进程到GPU以加快速度。只有3D变形会有自己的layer，2D变形不会。
translateZ() (or translate3d()) Hack: 为元素添加没有变化的3D变形，骗取浏览器触发硬件加速。
代价: 这种情况通过向它自己的层叠加元素，占用RAM和GPU存储空间。
兼容性:  IE13+、FireFox47+、Chrome49+、Safari9.1+、Opera39+、IOS9.3+、Android52+
关键词说明:
    auto：此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化。
    scroll-position：表示将要改变元素的滚动位置。
    contents：表示将要改变元素的内容。
    &lt;custom-ident&gt;:明确指定将要改变的属性与给定的名称。
    &lt;animateable-feature&gt;:可动画的一些特征值，比如left、top、margin等。
<span style="color: #e9394a;font-size: larger">使用注意（勿滥用、提前申明、remove）</span>
                            </pre>
                </li>
                <li style="border: 1px solid red">CSS 变量
                    <pre>什么是 CSS 变量
CSS 变量当前有两种形式：
    ① 以变量，就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用 var()函数使用变量。例如：var(--example-variable)会返回--example-variable 所对应的值
    ② 自定义属性。这些属性使用--*where*的特殊格式作为名字。例如--example-variable:20px;即使一个 css 声明语句。意思是将 20px 赋值给--example-varibale 变量。
基本用法
    声明一个变量:  element {  --main-bg-color: brown;  }
    使用变量:     element {  background-color: var(--main-bg-color);  }
注意：在之前的标准中，自定义属性以 var-作为前缀，后来才改成--前缀。Firefox 31 和以后的版本遵循新标准。

CSS 中重复的地方：某一样式作用在不同的元素上面。我们可以将背景色定义在更高的层级,然后通过 CSS 继承解决这个问题。在某些情况下，这种方法不一定可行.定义一个变量在:root 伪类上，使用变量来减少重复的代码。
    :root { --main-bg-color: brown; }
    .one { color: white;  background-color: var(--main-bg-color);
            margin: 10px; width: 50px;
            height: 50px; display: inline-block;
    }
    .two {
        color: white;   background-color: black;
        margin: 10px;   width: 150px;
        height: 70px;   display: inline-block;
    }
    .three {
        color: white;   background-color: var(--main-bg-color);
        margin: 10px;   width: 75px;
    }
    .four {
        color: white;   background-color: var(--main-bg-color);
        margin: 10px;   width: 100px;
    }
    .five { background-color: var(--main-bg-color);  }
只需要规范地声明所需的属性，就能得到和上面例子相同的结果


CSS变量的继承: 自定义属性同样支持继承;一个元素上没有定义自定义属性,该自定义属性的值会继承其父元素;
    &lt;div class="one"&gt;
		&lt;div class="two"&gt;
			&lt;div class="three"&gt;&lt;/div&gt;
			&lt;div class="four"&gt;&lt;/div&gt;
		&lt;div&gt;
    &lt;/div&gt;
定义下面的 CSS:
    .two { --test: 10px; }
    .three { --test: 2em; }
在这个例子中，var(--test)的结果是：
    ① class="two" 对应的节点: 10px
    ② class="three" 对应的节点: element: 2em
    ③ class="four" 对应的节点: 10px (inherited from its parent)
    ④ class="one" 对应的节点: 无效值, 即此属性值为未被自定义 css 变量覆盖的默认值


                    </pre>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>